// 语言切换，无语言包
$(function() {
    $(".language").on("click", function() {
        let self = this;
        $(this).find("ul").toggle();
        $(this).find("ul").on("click", "li", function() {
            $(self).find("a").text($(this).text());
        })
    })
})

// 国家查询
$(function () {
    var countryList = [
        { key: 'A', data: ['AL|阿尔巴尼亚', 'DZ|阿尔及利亚', 'AR|阿根廷', 'AF|阿富汗', 'IE|爱尔兰', 'EG|埃及', 'ET|埃塞俄比亚', 'EE|爱沙尼亚', 'AE|阿联酋', 'AW|阿鲁巴', 'OM|阿曼', 'AD|安道尔', 'AI|安圭拉', 'AO|安哥拉', 'AG|安提瓜和巴布达', 'AU|澳大利亚', 'AT|奥地利', 'AX|奥兰群岛', 'AZ|阿塞拜疆'] },
        { key: 'B', data: ['BB|巴巴多斯', 'PG|巴布亚新几内亚', 'BS|巴哈马', 'BY|白俄罗斯', 'BM|百慕大', 'PK|巴基斯坦', 'PY|巴拉圭', 'PS|巴勒斯坦', 'BH|巴林', 'PA|巴拿马', 'BG|保加利亚', 'BR|巴西', 'MP|北马里亚纳群岛', 'BJ|贝宁', 'BE|比利时', 'PE|秘鲁', 'IS|冰岛', 'PR|波多黎各', 'BA|波黑', 'PL|波兰', 'BO|玻利维亚', 'BW|博茨瓦纳', 'BZ|伯利兹', 'BT|不丹', 'BF|布基纳法索', 'BI|布隆迪', 'BV|布韦岛']},
        { key: 'C', data: ['GQ|赤道几内亚'] },
        { key: 'D', data: ['DK|丹麦', 'DE|德国', 'TL|东帝汶', 'TG|多哥', 'DO|多米尼加', 'DM|多米尼克'] },
        { key: 'E', data: ['EC|厄瓜多尔', 'ER|厄立特里亚', 'RU|俄罗斯'] },
        { key: 'F', data: ['FR|法国', 'FO|法罗群岛', 'VA|梵蒂冈', 'PF|法属波利尼西亚', 'GF|法属圭亚那', 'TF|法属南部领地', 'MF|法属圣马丁', 'FJ|斐济群岛', 'PH|菲律宾', 'FI|芬兰', 'CV|佛得角'] },
        { key: 'G', data: ['GM|冈比亚', 'CG|刚果（布）', 'CD|刚果（金）', 'GL|格陵兰', 'GD|格林纳达', 'GE|格鲁吉亚', 'CO|哥伦比亚', 'GG|根西岛', 'CR|哥斯达黎加', 'GP|瓜德罗普', 'GU|关岛', 'CU|古巴', 'GY|圭亚那'] },
        { key: 'H', data: ['HT|海地', 'KR|韩国 南朝鲜', 'KZ|哈萨克斯坦', 'HM|赫德岛和麦克唐纳群岛', 'ME|黑山', 'NL|荷兰', 'BQ|荷兰加勒比区', 'HN|洪都拉斯'] },
        { key: 'J', data: ['GH|加纳', 'CA|加拿大', 'KH|柬埔寨', 'GA|加蓬', 'DJ|吉布提', 'CZ|捷克', 'KG|吉尔吉斯斯坦', 'KI|基里巴斯', 'ZW|津巴布韦', 'GN|几内亚', 'GW|几内亚比绍'] },
        { key: 'K', data: ['KY|开曼群岛', 'CM|喀麦隆', 'CC|科科斯群岛', 'HR|克罗地亚', 'KM|科摩罗', 'KE|肯尼亚', 'CI|科特迪瓦', 'KW|科威特', 'CK|库克群岛'] },
        { key: 'L', data: ['LS|莱索托', 'LA|老挝', 'LV|拉脱维亚', 'LB|黎巴嫩', 'LR|利比里亚', 'LY|利比亚', 'LI|列支敦士登', 'LT|立陶宛', 'RE|留尼汪', 'RO|罗马尼亚', 'LU|卢森堡', 'RW|卢旺达'] },
        { key: 'M', data: ['MG|马达加斯加', 'IM|马恩岛', 'MV|马尔代夫', 'MT|马耳他', 'FK|马尔维纳斯群岛（ 福克兰）', 'MY|马来西亚', 'MW|马拉维', 'ML|马里', 'MU|毛里求斯', 'MR|毛里塔尼亚', 'MK|马其顿', 'MH|马绍尔群岛', 'MQ|马提尼克', 'YT|马约特', 'US|美国', 'UM|美国本土外小岛屿', 'AS|美属萨摩亚', 'VI|美属维尔京群岛', 'MN|蒙古国 蒙古', 'BD|孟加拉', 'MS|蒙塞拉特岛', 'MM|缅甸', 'FM|密克罗尼西亚联邦', 'MD|摩尔多瓦', 'MA|摩洛哥', 'MC|摩纳哥', 'MZ|莫桑比克', 'MX|墨西哥'] },
        { key: 'N', data: ['NA|纳米比亚', 'ZA|南非', 'AQ|南极洲', 'GS|南乔治亚岛和南桑威奇群岛', 'SS|南苏丹', 'NR|瑙鲁', 'NP|尼泊尔', 'NI|尼加拉瓜', 'NE|尼日尔', 'NG|尼日利亚', 'NU|纽埃', 'NF|诺福克岛', 'NO|挪威'] },
        { key: 'P', data: ['PW|帕劳', 'PN|皮特凯恩群岛', 'PT|葡萄牙'] },
        { key: 'Q', data: ['QA|卡塔尔'] },
        { key: 'R', data: ['JP|日本', 'SE|瑞典', 'CH|瑞士'] },
        { key: 'S', data: ['SV|萨尔瓦多', 'RS|塞尔维亚', 'SL|塞拉利昂', 'SN|塞内加尔', 'CY|塞浦路斯', 'SC|塞舌尔', 'WS|萨摩亚', 'SA|沙特阿拉伯', 'BL|圣巴泰勒米岛', 'CX|圣诞岛', 'ST|圣多美和普林西比', 'SH|圣赫勒拿', 'KN|圣基茨和尼维斯', 'LC|圣卢西亚', 'SM|圣马力诺', 'PM|圣皮埃尔和密克隆', 'VC|圣文森特和格林纳丁斯', 'LK|斯里兰卡', 'SK|斯洛伐克', 'SI|斯洛文尼亚', 'SJ|斯瓦尔巴群岛和 扬马延岛', 'SZ|斯威士兰', 'SD|苏丹', 'SR|苏里南', 'SB|所罗门群岛', 'SO|索马里'] },
        { key: 'T', data: ['TH|泰国', 'TJ|塔吉克斯坦', 'TO|汤加', 'TZ|坦桑尼亚', 'TC|特克斯和凯科斯群岛', 'TT|特立尼达和多巴哥', 'TM|土库曼斯坦', 'TN|突尼斯', 'TK|托克劳', 'TR|土耳其', 'TV|图瓦卢'] },
        { key: 'W', data: ['WF|瓦利斯和富图纳', 'VU|瓦努阿图', 'GT|危地马拉', 'VE|委内瑞拉', 'BN|文莱', 'UG|乌干达', 'UA|乌克兰', 'UY|乌拉圭', 'UZ|乌兹别克斯坦'] },
        { key: 'X', data: [ 'ES|西班牙', 'GR|希腊', 'SG|新加坡', 'NC|新喀里多尼亚', 'NZ|新西兰', 'HU|匈牙利', 'EH|西撒哈拉', 'SY|叙利亚'] },
        { key: 'Y', data: ['JM|牙买加', 'AM|亚美尼亚', 'YE|也门', 'IT|意大利', 'IQ|伊拉克', 'IR|伊朗', 'IN|印度', 'GB|英国', 'VG|英属维尔京群岛', 'IO|英属印度洋领地', 'ID|印尼', 'IL|以色列', 'JO|约旦', 'VN|越南'] },
        { key: 'Z', data: ['ZM|赞比亚', 'JE|泽西岛', 'TD|乍得', 'KP|朝鲜 北朝鲜', 'GI|直布罗陀', 'CL|智利', 'CF|中非共和国', 'CN|中国', 'CN|中国台湾', 'CN|中国香港', 'CN|中国澳门'] }
    ];

    var countryArr = [];
    
    // 把数据渲染到页面上
    function init() { 
        var html = '';
        $.each(countryList, function (i, item) {
            // console.log(item.data);
            html += `<div class="country_list"><span class="country_letter" id="${item.key + '1'}">${item.key}</span>`;         
            $.each(item.data, function (j, data) {
                var countryObj = {};
                var split = data.split('|');
                html += `<p data-id="${split[0]}">${split[1]}</p>`;
                countryObj.id = split[0];
                countryObj.name = split[1];
                countryArr.push(countryObj);  
            })
            html += `</div>`;
        })
        $(".input_country").append(html);
    }
    init(); // 把数据渲染到页面上

    $(".select_container").on("click", function() {
        $(".select_input_dropdown").toggle();
        $(".select_input").val("");
        $(".select_input_dropdown").scrollTop(0);
        $(".input_country").show();
        $(".select_country_list").hide();
        if($(this).hasClass("select_active")){
            $(this).removeClass("select_active");
            return;
        };
        $(this).addClass("select_active");
    });

    // 显示搜索到的国家列表
    $(".select_input").on("input", function() {
        $(".input_country").hide();  
        $(".select_country_list").show();
        $(".select_country_list").text(""); // 清空之前搜索后显示在页面的内容
        if($(".select_input").val() == ""){
            return;
        }
        var oNewList = []; // 清空之前搜索到的数据
        var str = "";
        oNewList = countryArr.filter(function (item) {
            return item.name.indexOf($(".select_input").val()) != -1;
        })
        // console.log(oNewList);
        for (var i = 0; i < oNewList.length; i++) {
            $(".select_country_list").append(`<li>${oNewList[i].name}</li>`);
        }
    })
    // 事件委托
    $(".input_country").on('click', '.country_list p', function () {
        $(".select_text").text($(this).text());
        $(".select_input_dropdown").hide();
        if($(".select_container").hasClass("select_active")){
            $(".select_container").removeClass("select_active");
            return;
        };
        $(".select_container").addClass("select_active");
    });
    // 事件委托
    $(".select_country_list").on('click', 'li', function () {
        $(".select_text").text($(this).text());
        $(".select_input_dropdown").hide();
        if($(".select_container").hasClass("select_active")){
            $(".select_container").removeClass("select_active");
            return;
        };
        $(".select_container").addClass("select_active");
    });

    $(window).on("click",function(e) { 
        // console.log(e.target.nodeName);
        if(e.target.nodeName == "svg" || e.target.nodeName == "rect" || e.target.nodeName == "path") {
            return;
        }
        if(e.target.className.indexOf("select_container") != -1 || 
        e.target.className == "select_input" || 
        e.target.className == "select_input_dropdown pos-a" || 
        e.target.className == "select_container  pos-r" || 
        e.target.className == "select_label" || 
        e.target.className == "select_line" || 
        e.target.className == "select_text" || 
        e.target.className == "select_angle pos-a" || 
        e.target.className == "select_inner_wrap" || 
        e.target.className == "select_inner_icon fl" || 
        e.target.className == "select_inner_container fl" || 
        e.target.className == "country_letter"){
            return; 
        }
        $(".select_input_dropdown").hide();
        if($(".select_container").hasClass("select_active")){
            $(".select_container").removeClass("select_active");
            return;
        };
    })
    
})

// 随机验证码
function draw(show_num) { // 调用的时候传入一个实参（实参的类型要是一个数组）
    var canvas_width=$('#canvas').width();
    var canvas_height=$('#canvas').height();
    var canvas = document.getElementById("canvas"); // 获取到canvas的对象，演员
    var context = canvas.getContext("2d"); // 获取到canvas画图的环境，演员表演的舞台
    canvas.width = canvas_width;
    canvas.height = canvas_height;
    var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
    var aCode = sCode.split(",");
    var aLength = aCode.length; // 获取到数组的长度
    
    for (var i = 0; i <= 3; i++) {
        var j = Math.floor(Math.random() * aLength); // 获取到随机的索引值
        var deg = Math.random() * 30 * Math.PI / 180; // 产生0~30之间的随机弧度
        var txt = aCode[j]; // 得到随机的一个内容
        // console.log(txt);
        show_num[i] = txt.toLowerCase(); // 将得到的内容转为小写字母，逐个存入数组show_num中
        var x = 10 + i * 20; // 文字在canvas上的x坐标
        var y = 20 + Math.random() * 8; // 文字在canvas上的y坐标
        context.font = "bold 23px 微软雅黑";

        context.translate(x, y);
        context.rotate(deg);

        context.fillStyle = randomColor();
        context.fillText(txt, 0, 0);

        context.rotate(-deg);
        context.translate(-x, -y);
    }
    for (var i = 0; i <= 5; i++) { // 验证码上显示线条
        context.strokeStyle = randomColor();
        context.beginPath();
        context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
        context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
        context.stroke();
    }
    for (var i = 0; i <= 30; i++) { // 验证码上显示小点
        context.strokeStyle = randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
    }
}

function randomColor() { // 随机颜色
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
}


$(function(){
    
    // 判断用户名输入是否合法
    var unameFlag = false;
    $(".uname_input").on("focus", function() {
        $(".uname_form_tip").text("用户名由 6-18 位数字、字母或下划线组成、不能数字开头").css({color: "rgba(0,0,0,0.3)"});
    })
    $(".uname_input").on("blur", function() {
        if($(this).val() == "") {
            $(".register_button").removeClass("button_abled").addClass("button_disabled");
            return;
        }
        var strName = $(this).val();
        var reg = /^[a-zA-Z_]\w{5,17}$/i;
        unameFlag = reg.test(strName);
        if (!unameFlag){
            $(".uname_form_tip").text("您输入的用户名不合法").css({color: "red"});
            $(".register_button").removeClass("button_abled").addClass("button_disabled");
            
        }
        else {
            $(".uname_form_tip").text("您输入的用户名合法").css({color: "green"});
            if( unameFlag && verifyFlag && upwdFlag && checkFlag) {
                $(".register_button").removeClass("button_disabled").addClass("button_abled");
            } else {
                $(".register_button").removeClass("button_abled").addClass("button_disabled");
            }
        }
    })


    // 定义调用时传入的实参，用于存放验证码
    var verify_code = [];
    draw(verify_code);
    // console.log(verify_code); // ['h', '7', 'g', '6']
    // console.log(verify_code.join("")); // h7g6
    // 点击切换验证码
    $("#canvas").on('click', function () {
        draw(verify_code);
    })

    // 判断验证码是否输入正确
    var verifyFlag = false;
    $(".verify_input").on("blur", function () {
        var val = $(".verify_input").val().toLowerCase(); // 将输入框的值转为小写字母
        var verify_str = verify_code.join("");
        if (val == "") {
            $(".register_button").removeClass("button_abled").addClass("button_disabled");
            return;
        } else if (val == verify_str) {
            verifyFlag = true;
            if( unameFlag && verifyFlag && upwdFlag && checkFlag) {
                $(".register_button").removeClass("button_disabled").addClass("button_abled");
            } else {
                $(".register_button").removeClass("button_abled").addClass("button_disabled");
            }
        } else {
            verifyFlag = false;
            $(".verify_input").val("");
            alert('验证码错误！请重新输入！');
            draw(verify_code);
            $(".register_button").removeClass("button_abled").addClass("button_disabled");
        }
    })

    // 密码的显示与隐藏
    $(".upwd_icon_wrap").on("click",function() {
        if($(".upwd_icon_wrap").hasClass("upwd_icon_active")){
            $(".upwd_icon_wrap").removeClass("upwd_icon_active");
            $(".upwd_input").attr("type","password");
            return;
        };
        $(".upwd_icon_wrap").addClass("upwd_icon_active");
        $(".upwd_input").attr("type","text");
    })

    // 判断密码输入是否合法
    var upwdFlag = false;
    $(".upwd_input").on("focus", function() {
        $(".upwd_form_tip").text("密码由 6-16 位数字、字母或符号( . 或 _ )组成、至少包含两种字符").css({color: "rgba(0,0,0,0.3)"});
    })
    $(".upwd_input").on("blur", function() {
        if($(this).val() == "") {
            $(".register_button").removeClass("button_abled").addClass("button_disabled");
            return;
        }
        // 密码由 6-16 位数字、字母或符号组成、至少包含两种字符
        // var reg = /(?!^[0-9]+$)(?!^[A-Za-z]+$)(?!^[^A-Za-z0-9]+$)^.{6,16}$/;
        var strPwd = $(this).val();
        // 密码由 6-16 位数字、字母或符号（ . 或 _ ）组成、至少包含两种字符
        var reg = /(?!^[0-9]+$)(?!^[A-Za-z]+$)(?!^\.+$)(?!^_+$)^[A-Za-z0-9_\.]{6,16}$/;
        upwdFlag = reg.test(strPwd);
        if (!upwdFlag){
            $(".upwd_form_tip").text("您输入的密码格式不正确").css({color: "red"});
            $(".register_button").removeClass("button_abled").addClass("button_disabled");
        }
        else {
            $(".upwd_form_tip").text("您输入的密码格式正确").css({color: "green"});
            if( unameFlag && verifyFlag && upwdFlag && checkFlag) {
                $(".register_button").removeClass("button_disabled").addClass("button_abled");
            } else {
                $(".register_button").removeClass("button_abled").addClass("button_disabled");
            }
        }
    })
    
    // 判断协议是否同意（勾选）
    var checkFlag = false;
    $(".checkbox_frame").on("click", function() {
        if(!($(".checkbox_frame").hasClass("checkbox_unchecked"))){
            $(".checkbox_frame").removeClass("checkbox_checked").addClass("checkbox_unchecked");
            checkFlag = false;
            $(".register_button").removeClass("button_abled").addClass("button_disabled");
            return;
        };
        $(".checkbox_frame").removeClass("checkbox_unchecked").addClass("checkbox_checked");
        checkFlag = true;
        if( unameFlag && verifyFlag && upwdFlag && checkFlag) {
            $(".register_button").removeClass("button_disabled").addClass("button_abled");
        } else {
            $(".register_button").removeClass("button_abled").addClass("button_disabled");
        }
    })

    $(".register_button").on('click',function(){
        // console.log(unameFlag,verifyFlag,upwdFlag,checkFlag);
        if( !unameFlag || !upwdFlag || !verifyFlag || !checkFlag ) {
            return;
        }
        // 获取localStorage
        var oUserList = JSON.parse(localStorage.getItem("userInfo") || '[]');
        // 将注册信息存入对象 oUser中
        var oUser = {
            name: $(".uname_input").val(),
            pwd:  $(".upwd_input").val(),
            address: $(".select_text").text(),
        }
        var isAdd = false; // 默认没有注册过
        for (var i = 0; i < oUserList.length; i++) {
            if (oUserList[i].name == oUser.name) {
                isAdd = true; // 注册过
                break;
            }
        }
        // 如果没有注册过，把注册信息存入localStorage中
        if (isAdd == false) {
            oUserList.push(oUser);
            localStorage.setItem("userInfo", JSON.stringify(oUserList));
            if(confirm("注册成功，点击确定将跳转至登录页面")){
                window.location.href = '../views/login.html';
            }
        } else {
            alert("该用户已注册，注册失败");
        
        }
        
    })
    
})
